<!DOCTYPE html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<html>
<head>
<link href="<c:url value="/bootstrap/css/bootstrap.min.css"/>" rel="stylesheet">	
<link href="<c:url value="/bootstrap/css/datepicker.css"/>" rel="stylesheet">	
<link rel="stylesheet" media="all" type="text/css"
	href="<c:url value="/resources/css/styles.css" />">

	<script  type="text/javascript"
	src='<c:url value="/resources/js/jquery-1.11.1.min.js" />'></script>
	<script src="<c:url value="/bootstrap/js/bootstrap.min.js"/>"></script>
	<script src="<c:url value="/bootstrap/js/bootstrap-datepicker.js"/>"></script>
<meta charset="utf-8">
<title>Travel Journal</title>
</head>
<body>
	<div class="header">
		<div class="topnav">
			<ul id="nav">
				<li><a href="/TravelJournal/">Log Out</a></li>
			</ul>
		</div>
	</div>


	<div id="content">
		<div id="sidebar">
			<ul>
				<li><a href="/TravelJournal/welcome">Home</a></li>
				<li><a href="/TravelJournal/records/myrecords">My Travel Records</a></li>
				<li><a href="#">Add Record</a></li>
				<li><a href="/TravelJournal/records/map">My Travel Map</a></li>
			</ul>
		</div>
			<div id="main-content">
			
				<h2>Add Record</h2>

				<c:if test="${not empty error}">
					<div class="error">${error}</div>
				</c:if>

				<form:form method="post" commandName="travelRecord" role="form" onsubmit="return validate();">
					<div class="form-group">
						<form:label path="country">Country:</form:label>
						
						<form:select id="country" path="country" class="form-control">
						</form:select>
					</div>
					<div class="form-group">
						<form:label path="city">City:</form:label>
						<form:select id="city" path="city" class="form-control">
							<form:option value="">City</form:option>
						</form:select>
					</div>
					<div class="form-group">
						<label>Start Date</label>
						<div class="input-group date">
					    <form:input id="startDate" path="startDate" type="text" class="form-control"/><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
					    </div>
					</div>
					<div class="form-group">
						<label>End Date</label>
						<div class="input-group date">
					    <form:input id="endDate" path="endDate" type="text" class="form-control"/><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
					    </div>
					</div>
					<input id='submitButton' type="submit" value="Save" class="btn"/>
				</form:form>

			</div>
		


	</div>
	
	<script type="text/javascript">
	
	function validate(){
		$('#city').parent().removeClass("has-error");
		$('#country').parent().removeClass("has-error");
		$('#startDate').parent().removeClass("has-error");
		$('#endDate').parent().removeClass("has-error");
		var returnVal = true;
		if($('#startDate').val() == ''){
			$('#startDate').parent().addClass("has-error");
			returnVal = false;
		}
		if($('#endDate').val() == ''){
			$('#endDate').parent().addClass("has-error");
			returnVal = false;
		}
		if($('#city').val() == ''){
			$('#city').parent().addClass("has-error");
			returnVal = false;
		}
		if($('#country').val() == ''){
			$('#country').parent().addClass("has-error");
			returnVal = false;
		}
		return returnVal;
	}
	
$(document).ready(
	   
	function() {
		
		 $('.input-group.date').datepicker({
		    });	
			
		
		$.getJSON('/TravelJournal/location/countries', {
			ajax : 'true'
		}, function(data) {
			var html = '<option value="">Country</option>';
			var len = data.length;
			for ( var i = 0; i < len; i++) {
				html += '<option value="' + data[i].code + '">'
						+ data[i].name + '</option>';
			}
			html += '</option>';
                        //now that we have our options, give them to our select
			$('#country').html(html);
		});
	});
	
	
$(document).ready(function() { 
	$('#country').change(
		function() {
			$.getJSON('/TravelJournal/location/cities/' + $(this).val(), {
				
				ajax : 'true'
			}, function(data) {
				var html = '<option value="">City</option>';
				var len = data.length;
				for ( var i = 0; i < len; i++) {
					html += '<option value="' + data[i].id + '">'
							+ data[i].name + '</option>';
				}
				html += '</option>';
 
				$('#city').html(html);
			});
		});
});
</script>
	
</body>
</html>
